<template>
	<view>
		<view>
			<view class="detail">
				<!-- 背景图 -->
				<view class="">
					<image :src="imgURL+ details.indexImg" mode="widthFix" style="width:100%;"></image>
				</view>
		
				<view class="border-radius-shadow margin-com"
					style="background-color: #fff;margin-bottom: 60rpx;width:92%;height:150px;font-weight: bold;">
					<view class="title margin-com padding-top-com" style="width: 93%;height: 40%;">{{details.productName}}
					</view>
					<view class="theme-color margin-right-com flex-row-ec padding-right-com" style="font-size: 25px;margin-left: auto;
					width: 100%;border-bottom-color: #f5f5f5;border-bottom-width: 1px;border-bottom-style: solid;">
						￥{{details.monovalent}}</view>
					<view class="flex-row-st margin-com text-low" style="font-size: 30rpx;height: 10%;">
						<view class="">销量:{{details.salesVolume}}</view>
						<view class="" style="margin-left: auto;">库存：{{details.inventory}}</view>
					</view>
		
				</view>
		
				<!-- 产品介绍 -->
				<view class="introduce margin-tb-com" style="width: 100%;height: fit-content;">
					<view class="margin-com text-lg text-bold" style="">产品介绍</view>
					<view class="expound margin-com border-radius-shadow" style="width: 92%">
						<view class="box flex-row-st">
							<view class="box-left text-mid padding-left-com flex-row-st "
								style="border-radius:20rpx 0 0 0 ;">品牌</view>
							<view class="box-right padding-left-com flex-row-st">{{details.brand}}</view>
						</view>
						<view class="box box-m flex-row-st" v-if="details.functionality!=null">
							<view class="box-left text-mid padding-left-com flex-row-st ">功能性</view>
							<view class="box-right padding-left-com flex-row-st">{{details.functionality}}</view>
						</view>
						<view class="box box-m flex-row-st" v-if="details.sizeList.length>0">
							<view class="box-left text-mid padding-left-com flex-row-st text-bg">尺码</view>
							<view class="box-right padding-left-com flex-row-st">{{details.sizeList}}</view>
						</view>
						<view class="box box-m flex-row-st" v-if="details.style.length>0">
							<view class="box-left text-mid padding-left-com flex-row-st ">风格</view>
							<view class="box-right padding-left-com flex-row-st">{{details.style}}</view>
						</view>
						<view class="box box-m flex-row-st" style="width:100%;" v-if="details.colorList.length>0">
							<view class="box-left text-mid padding-left-com flex-row-st "
								style="border-radius: 0 0 0 20rpx;">颜色分类</view>
							<view class="box-right margin-left-com flex-row-st" style="width:10%"
								v-for="item in details.colorList">{{item}}</view>
						</view>
					</view>
				</view>
		
				<!-- 详情图片 -->
				<view class="detail margin-tb-com" style="">
					<view class="title margin-com" style="font-weight: bolder;">商品详情</view>
					<image v-for="item in details.imgUrl" :src="imgURL+ item" mode="widthFix" style="width:100%"></image>
				</view>
		
				<!-- 底部导航栏 -->
				<view class="" style="width:100%;height:80px;"></view>
		
				<view class=" tabbar flex-row-st " style="position: fixed; bottom: 0; left: 0; right: 0;
				width:100%;height:60px;background-color: #fff;">
					<view class="goods-carts">
						<uni-goods-nav @click="onClick" :options="optiondata.options" :fill="true"
							:button-group="buttondata.buttonGroup" @buttonClick="openPop" />
					</view>
				</view>
			</view>
			<!-- 购物车弹窗 -->
			<uni-popup ref="cart_popup" type="bottom" border-radius="10px 10px 0 0">
				<view class="padding-bottom-sm" style="background-color: #fff;width:100%;border-radius: 30rpx 30rpx 0 0;">
					<!-- 图片,价格 -->
					<view class="flex-row-st" style="">
						<image class="margin-com " :src="imgURL+ details.indexImg" mode="aspectFill"
							style="width:50px;height:50px"></image>
						<text class="theme-color">￥{{details.monovalent}}</text>
					</view>
					<!-- 分类test -->
					<view class="margin-left-com">分类</view>
					<scroll-view scroll-y="true" class="scroll-Y" style="height: 400rpx;">
						<view class="flex-row padding-tb-sm"
							style="font-size: 25rpx;width:100%;height:100rpx; flex-wrap: wrap;">
							<view class="bg-color border-radius-shadow flex-row-ct margin-left-com padding-lr-lg"
								style="height:60rpx"
								:style="{color:(index == current ? '#ee3f4d' : ''),border:(index == current ? '1px solid #ee3f4d' : ''),background:(index == current ? '#fff' : '')}"
								v-for="(item,index) in inventory" :key="index">
								<view v-if="item.inventory>0" @click="change_select(index)">
									<text v-if="item.color.length>0">{{item.color}}</text>
									<text v-if="item.size.length>0">{{item.size}}</text>
									<text v-if="item.specifications.length>0">+{{item.specifications}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
		
					<!-- 数量加减 -->
					<view class="margin-top-sm flex-row-bt padding-lr-com">
						<view class="">数量</view>
						<uni-number-box :min="1" :value="number" />
					</view>
					<!-- 加入购物车 -->
					<view>
						<button class="theme-bg-color margin-left-com margin-top-lg" type="warn" size="mini"
							style="color:#fff;width:90%;height:70rpx;align-items: center;" @click="addcart">加入购物车</button>
					</view>
				</view>
			</uni-popup>
			<!-- 立即购买弹窗 -->
			<uni-popup ref="pay_popup" type="bottom" border-radius="10px 10px 0 0">
				<view class="padding-bottom-sm" style="background-color: #fff;width:100%;border-radius: 30rpx 30rpx 0 0;">
					<!-- 图片,价格 -->
					<view class="flex-row-st" style="">
						<image class="margin-com " :src="imgURL+ details.indexImg" mode="aspectFill"
							style="width:50px;height:50px"></image>
						<text class="theme-color">￥{{details.monovalent}}</text>
					</view>
					<!-- 分类test -->
					<view class="margin-left-com">分类</view>
					<scroll-view scroll-y="true" class="scroll-Y" style="height: 400rpx;">
						<view class="flex-row padding-tb-sm"
							style="font-size: 25rpx;width:100%;height:100rpx; flex-wrap: wrap;">
							<view class="bg-color border-radius-shadow flex-row-ct margin-left-com padding-lr-lg"
								style="height:60rpx"
								:style="{color:(index == current ? '#ee3f4d' : ''),border:(index == current ? '1px solid #ee3f4d' : ''),background:(index == current ? '#fff' : '')}"
								v-for="(item,index) in inventory" :key="index">
								<view v-if="item.inventory>0" @click="change_select(index)">
									<text v-if="item.color.length>0">{{item.color}}</text>
									<text v-if="item.size.length>0">{{item.size}}</text>
									<text v-if="item.specifications.length>0">+{{item.specifications}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
		
					<!-- 数量加减 -->
					<view class="margin-top-sm flex-row-bt padding-lr-com">
						<view class="">数量</view>
						<uni-number-box :min="1" :value="number" />
					</view>
					<!-- 支付 -->
					<view>
						<button class="theme-bg-color margin-left-com margin-top-lg" type="warn" size="mini"
							style="color:#fff;width:90%;height:70rpx;align-items: center;" @click="topay">支付</button>
					</view>
				</view>
			</uni-popup>
		
		</view>
		<!-- 接口请求加载动画 -->
		<loading></loading>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { getProductInfo, getInventoryInfo } from '../../api/shop/shop';
	import { onLoad } from "@dcloudio/uni-app"
	import { imgURL } from '../../api/request';
	// import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	//弹窗
	const cart_popup = ref(null)
	const pay_popup = ref(null)
	const openPop = (e) => {
		if (e.index == 0) {
			cart_popup.value.open()
		}
		else {
			pay_popup.value.open()
		}
		console.log('e===========' + JSON.stringify(e))
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性

		//请求库存
		get_inventory()
	}

	//商品选择切换
	const current = ref(0)
	const change_select = (index : any) => {
		console.log(index)
		current.value = index
	}
	//
	//库存信息
	const inventory = ref([{
		"id": "1775367574860140545",
		"color": "",
		"size": "",
		"inventory": 100,
		"productId": "2",
		"specifications": "350ml",
		"monovalent": "25.10"
	}])
	//
	//
	//底部导航，购物车
	// const onClick=(e) =>{
	// 				uni.showToast({
	// 					title: `点击${e.content.text}`,
	// 					icon: 'none'
	// 				})
	// 			}
	//按钮，底部导航
	const onClick = (e) => {
		console.log('e===========' + JSON.stringify(e))
		// if(e.index==0) {
		// 	uni.navigateTo({
		// 		url:'',
		// 	})
		// }
		// else{
		// 	uni.navigateTo({
		// 	url: '../shop/shop-pay',
		// 	})
		// }
		uni.showToast({
			title: '功能正在开发中...',
			icon: 'none',
			duration: 2000
		});
		//optiondata.options[2].info++
	}
	const buttondata = reactive({
		buttonGroup: [{
			id: 1,
			text: '加入购物车',
			backgroundColor: ' #F37680',
			color: '#fff'
		},
		{
			id: 2,
			text: '立即购买',
			backgroundColor: '#EE3F4D',
			color: '#fff'
		}
		]
	})
	const optiondata = reactive({
		options: [{
			icon: 'chat',
			text: '客服'
		}, {
			icon: 'cart',
			text: '购物车',
			info: 3
		}]
	})
	//按钮，底部导航

	//商品详情
	let details = ref({
		"id": "",
		"indexImg": "",
		"productName": "",
		"monovalent": "",
		"inventory": 0,
		"salesVolume": 0,
		"detailsId": "",
		"brand": "",
		"style": "",
		"functionality": "",
		"imgUrl": [],
		"colorList": [],
		"sizeList": [],
		"specificationsList": []

	})
	//
	//选择商品数量
	const number = ref(1)

	onLoad((option) => {
		const id = option.id
		//请求详情
		get_detail(id)
	})
	//请求详情
	const get_detail = (id) => {
		getProductInfo({
			productId: id
		}).then((res : any) => {
			//赋值
			console.log(JSON.stringify(res.data))
			details.value = res.data
		})
	}
	//跳转支付
	const topay = () => {
		// 	uni.navigateTo({
		// url: '/pages/shop/shop-pay',
		uni.showToast({
			title: '功能正在开发中...',
			icon: 'none',
			duration: 2000
		})
	}
	//加入购物车
	const addcart = () => {
		uni.showToast({
			title: '功能正在开发中...',
			icon: 'none',
			duration: 2000
		})
	}

	//商品库存请求
	const get_inventory = () => {
		getInventoryInfo({
			productId: parseInt(details.value.id)
		}).then((res : any) => {
			inventory.value = res.data
		})
	}
</script>

<style lang="scss" scoped>
	.detail {
		.introduce {
			.expound {
				.box {
					width: 100%;
					height: 100rpx;
					font-size: 30rpx;
					font-weight: bold;

					.box-left {
						width: 40%;
						height: 100%;
						border-right: 1px solid #d9d9d9;
						background-color: $bg-color;
					}

					.box-right {
						width: 60%;
						height: 100%;
						background-color: #fff;
					}
				}

				.box-m {
					border-top: 1px solid #D9D9D9;
				}
			}
		}
	}

	.left {

		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		// flex: 1;
		position: relative;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 0 10px;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */

	}

	.tabbar {
		box-shadow: $uni-shadow-lg;

		//
		.goods-carts {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
		}

		//
	}
</style>